<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/" >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家政网</title>
    <meta name="keywords" content="家政网">
    <meta name="description" content="">
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta name =“apple-mobile-web-app-capable”content =“yes”/>  
    <!-- 苹果手机顶部为黑色 -->
    <meta name =“apple-mobile-web-status-bar-style”content =“block”/>  
    <link rel="icon" href="./images/icon.icon" type="images/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/order.css">

</head>
<body>
    <!-- logo -->
    <header>
        <div class="header-logo">
            <a href="">
                <span class="logo-icon"></span>
            </a>
        </div>
        <div class="header-search">
            <a href="">深圳 v</a>
            <input type="text" value="搜索">
        </div>
    </header>

    <!-- 订单列表 -->
    <div class="order">
        <div class="sub-title">
            <h3>订单详情</h3>
        </div>

        <div class="order-container">
            <table>
                <tbody class="order-tbody">
                    <div class="order-master-name">李师傅</div>
                    <tr>
                        <th>名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>

                    <tr>
                        <td class="order-img">
                            <img src=".//images/service-img.jpg" alt="">
                            <span>家用空调安装，5年专业安装经验，3年质保服务</span>
                        </td>
                        <td>100</td>
                        <td class="order-add-minus">
                            <span>-</span>
                            <input type="text">
                            <span>+</span> 
                        </td>
                        <td><input type="button" value="删除"></td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 用户信息 -->
    <div class="order-user-info">
        <div class="sub-title">
            <h3>用户信息</h3>
        </div>
        <div class="user-container">
            <div class="user-input">
                <label for="">联系地址:</label>
                <input type="text" placeholder="xxx省/市/自治区,xxx市,xxx区,街道/住址">
            </div>
            <div class="user-input">
                <label for="">预约时间:</label>
                <input type="text" placeholder="街道/住址">
            </div>

            <div class="user-input">
                <label for="">联系电话:</label>
                <input type="text" placeholder="180 2635 4874">
            </div>

            <div class="user-input">
                <label for="">称呼:</label>
                <input type="text" placeholder="杨先生">
            </div>

            <div class="user-info-submit">
                <input type="button" value="确认">
            </div>
        </div>

    </div>

    <!-- 信息确认 -->
    <div class="information-submit">
        <div class="information-container">
            <div class="total-price"></div>
            <div class="submit-add"></div>
            <div class="submit-date"></div>
            <div class="submit-tel"></div>
            <div class="submit-name"></div>
            <div class=""> <input type="button" value="提交订单"></div>
        </div>
    </div>


    <!-- 版权信息 -->
    <div class="footer">
        <div class="footer-container">
            <p>家政网，你的专业私人管家助手</p>
            <p>家政热线：<span>400-200-300</span>&nbsp;&nbsp;&nbsp;<span>031-516-511</span></p>
            <p class="footer-contact">
                <a href="">成为合伙人</a> |
                <a href="">关于我们</a> |
                <a href="">意见反馈</a> |   
                <a href="">在线招聘</a>
            </p>
        </div>
    </div>

    <!-- 悬浮导航 -->
    <div class="suspend-footer">
        <ul class="suspend-container">
            <li class="suspend-list">
                <a href="">
                    <div><span class="home-icon suspend-icons"></span></div>
                    <div class="home-title">首页</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="publish-icon suspend-icons"></span></div>
                    <div class="home-title">发布</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="information-icon suspend-icons"></span></div>
                    <div class="home-title">消息</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="user-icon suspend-icons"></span></div>
                    <div class="home-title">我的</div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>